// 渲染图片数据的时候 用https://res.vmallres.com/pimages//product/697222582043201/428_428_00E100D81511236A1C2978E3B652A9FE606789B2E33863E0mp.png
// https://res.vmallres.com/pimages/
// photoName: "706395CE98EB6A95286AFD0716D2C7E9293B7F42C1DDFBECmp.png"
// photoPath: "/product/6901443393244/"
// 拼接出img src


$(function(){
    class List{
        constructor(){
            this.count = 0
            this.start = 0
            this.getData((res)=>{
                this.classficationRender( res.data.labelList )
                var res = res.data.resultList
                this.phoneListRender( res )
                // new LazyLoad()
                this.bindEvent(res)
                $("#classfication-render").on("click" , "#sx" , a=> {
                    this.start = 0
                    let data = this.sortData(res)
                    this.phoneListRender(res)
                    this.bindEvent(res)
                })
                $("#classfication-render").on( "click" , "#jx" , a => {
                    this.start = 0
                    let data = this.sortReturnData(res)
                    this.phoneListRender(res)
                    this.bindEvent(res)
                })
                $("#classfication-render").on( "click" , "#zh" , a => {
                    var option = {
                        url : "http://localhost:3000/static/data/list-pull.json"
                    }
                    axios( option ).then( res => {
                        this.start = 0
                        var res = res.data.resultList
                        this.phoneListRender( res )
                        this.bindEvent(res)
                        // window.dispatchEvent( new Event("scroll"));
                    })
                })
            })
            
        }
        getData(callback){
            var option = {
                url : "http://localhost:3000/static/data/list-pull.json"
            }
            axios( option ).then( res => {
                callback(res)
                // window.dispatchEvent( new Event("scroll"));
            })
        }
        
        bindEvent( res ){
            // 划过效果
            $(".phone").each( (index , ele ) => {
                on( ele , "mouseenter" , () =>{
                    $(".phone").eq(index).animate({ top : -3 })
                    $(".phone").eq(index).css({ "box-shadow" : "0 0 8px #ddd"} )
                })
                on( ele , "mouseleave" , () =>{
                    $(".phone").eq(index).animate({ top : 0 })
                    $(".phone").eq(index).stop(true , true)
                    $(".phone").eq(index).css({ "box-shadow" : "none" } )
                })
            })
            // 服务优惠 屏幕尺寸input
            $(".server .center div").each( (index , ele) => {
                on( ele , "mouseover" , a => {
                    $(".server .center input")[index].style.display = "block"
                })
                on( ele , "mouseout" , a => {
                    $(".server .center input")[index].style.display = "none"
                })
            })
            $(".screen .center div").each( (index , ele) => {
                on( ele , "mouseover" , a => {
                    $(".screen .center input")[index].style.display = "block"
                })
                on( ele , "mouseout" , a => {
                    $(".screen .center input")[index].style.display = "none"
                })
            })
            // 瀑布加载
            $(window).on( "scroll" , a => {
                this.pullHeight = this.getAbsTop(document.querySelector("footer"))
                if( (scrollY+innerHeight) > ( this.pullHeight - 100 )  ){
                    this.start += 20
                    if( this.start >= res.length - 1 ) return
                    this.pullRender(res)
                    this.bindEvent(res)
                }
            })
            // 保存数据跳转
            $("main").on( "click" , ".phone" , (e) => {
                this.saveId( res , e.target )
                
            })
            // $(".phone").each( ( index , ele ) => {
            //     on( ele , "click" , a => {
            //         this.saveId( res , index )
            //     })
            // })
        }
        // 品类分类渲染
        classficationRender( data ){
            var html = `<div class="class clear">
                <div class="left">分类</div>
                <div class="center">`
            // 点击更多就多渲染5个
            var render_num = data.length - 5 ;
            for( var i = 0 ; i < render_num ; i++ ){
                html += `<li><div>${data[i].categoryName}<div></li>`
            }
            html += `</div>
                <div class="right">更多</div>
            </div>`

            html += `<div class="server clear" >
                <div class="left">${data[0].labelContentList[0].displayName}</div>
                <div class="center">`
            var server_data = data[0].labelContentList[0].itemEntryList
            for( var i = 0 ; i < server_data.length ; i++ ){
                html += `<li><div><input type="checkbox">${server_data[i].value}</div></li>`
            }
            html += `</div></div>`

            html += `<div class="screen clear">
                <div class="left">${data[0].labelContentList[1].displayName}</div>
                <div class="center">`
            var screen_data = data[0].labelContentList[1].itemEntryList
            for( var i = 0 ; i < screen_data.length ; i++ ){
                html += `<li><div><input type="checkbox">${screen_data[i].value}</div></li>`
            }
            html += `</div></div>`

            html += `<div class="select clear">
                <div class="left">更多选项</div>
                <div class="center">`
            var select_data = data[0].labelContentList
            for( var i = 2 ; i < select_data.length ; i++ ){
                html += `<li><div>${select_data[i].displayName}</div></li>`
            }
            html += `</div></div>`

            html += `<div class="sert clear">
                <div class="left">排序</div>
                <div class="center">`
            var select_data = data[0].labelContentList
            html += `<li><div id="zh">综合</div></li>
            <li><div>最新</div></li>
            <li><div>评论数</div></li>
            <li><div id="jx">降序</div></li>
            <li><div id="sx">升序</div></li>`
            html += `</div></div>`
            $("#classfication-render").html( html )
        }
        phoneListRender( data ){
            console.log(data);
            
            var html = ''
            for( var i = 0 ; i < 20 ; i++ ){
                html += `
                <li class="phone" data-id="${data[i].productId}">
                    <img data-id="${data[i].productId}" src="https://res.vmallres.com/pimages/${data[i].photoPath}428_428_${data[i].photoName}" alt="">
                    <h5 data-id="${data[i].productId}">${data[i].name}</h5>
                    <div>
                        <p data-id="${data[i].productId}">￥${data[i].price}</p><div>多款可选</div>
                    </div>
                    <dt data-id="${data[i].productId}">赠送积分</dt>
                    <b data-id="${data[i].productId}">21332人评价<span>99%好评</span></b>
                </li>`
                $("#phone-render").html( html )
            }
        }
        pullRender( data ){
            var html = ''
            for( var i = this.start ; i < this.start+20 ; i++ ){
                html += `
                <li class="phone" data-id="${data[i].productId}">
                    <img data-id="${data[i].productId}" src="https://res.vmallres.com/pimages/${data[i].photoPath}428_428_${data[i].photoName}" alt="">
                    <h5 data-id="${data[i].productId}">${data[i].name}</h5>
                    <div>
                        <p data-id="${data[i].productId}">￥${data[i].price}</p><div>多款可选</div>
                    </div>
                    <dt data-id="${data[i].productId}">赠送积分</dt>
                    <b data-id="${data[i].productId}">21332人评价<span>99%好评</span></b>
                </li>`
            }
            $("#phone-render").append( html )
        }
        sortData(data){
            for( var i = 0 ; i < data.length-1 ; i++ ){
                for( var j = i+1 ; j < data.length ; j++ ){
                    if( data[i].price > data[j].price ){
                        var obj = data[i]
                        data[i] = data[j]
                        data[j] = obj
                    }
                }
            }
            return data
        }
        sortReturnData(data){
            for( var i = 0 ; i < data.length-1 ; i++ ){
                for( var j = i+1 ; j < data.length ; j++ ){
                    if( data[i].price < data[j].price ){
                        var obj = data[i]
                        data[i] = data[j]
                        data[j] = obj
                    }
                }
            }
            return data
        }
        getAbsTop(ele){
            if( ele.offsetParent !== document.body ){
                return ele.offsetTop + this.getAbsTop(ele.offsetParent)
            }
            return ele.offsetTop
        }
        saveId( data , ele ){
            console.log(ele.getAttribute("data-id"));
            
            // 给一个页面标志 方便detail请求数据
            cookie("html" , "phonelist")
            cookie("productId" , ele.getAttribute("data-id"))
            // location.href = "http://localhost:3000/dist/detail.html" 
            window.open( "http://localhost:3000/dist/detail.html" , "_blank" )
        }

    }
    var list = new List()


    class LazyLoad{
        constructor( ){
            this.imgs = Array.from(document.querySelectorAll(".phone img"))
            this.top_list = this.imgs.map( ele => this.getAbsTop(ele) )
            this.bindEvent()
            window.dispatchEvent(new Event("scroll"));
        }
        getAbsTop(ele){
            if( ele.offsetParent !== document.body ){
                return ele.offsetTop + this.getAbsTop(ele.offsetParent)
            }
            return ele.offsetTop
        }
        bindEvent(){
            window.addEventListener("scroll" , ()=>{
                this.load()
            })
        }
        load(){
            for (let i = 0; i < this.top_list.length; i++) {
                if (this.top_list[i] <= scrollY + innerHeight) {
                    // 图片如果已经加载了那就直接删除掉这个图片就可以了; 
                    let loadImg = new Image();
                    loadImg.src = this.imgs[i].getAttribute("data-src");

                    let img = this.imgs[i]

                    loadImg.onload = () => {
                        img.src = img.getAttribute("data-src");
                    }
                    this.imgs.splice(i, 1)
                    this.top_list.splice(i, 1)
                    i--;
                    // 删除掉对应的元素和高度信息; 

                }
          }
        }
    }
})